<template>
  <div class="all-container">
    <!-- 搜索组件 -->
    <Search></Search>
    <div class="all-include">
      <div class="all-left">
        <div class="latest-articles" style="height:8.1vh; width: 7.8vw; text-align:center; line-height: 8.1vh; color: rgba(13, 128, 120, 1); font-size: 18px">最新的文章</div>

        <!-- 文章组件 -->
        <!-- 这里的Item是每一篇文章，只需要传递他对应的文章信息，不需要传整个数组 -->
        <Item v-for="(item,index) in articles" :key="item.articleId" class="item-container" :articles="articles[index]" ></Item>
      </div>
      <div class="all-mid">
        <Recommend></Recommend>
        <Star></Star>
      </div>
      <div class="all-right">
          <Person :userList="userList"></Person>
      </div>
    </div>

  </div>
</template>

<script>
/**
 @file 博客总页
 **/
// 导入组件
import Search from "../all/components/search.vue";
import Item from "../all/components/item.vue";
import Recommend from "../all/components/recommend.vue";
import Star from "../all/components/star.vue";
import Person from "../all/components/person.vue";
//  导入请求
import { getUpdateItems } from '@/api/articles.js'
import { getUserProfile } from '@/api/user.js'
export default {
  name: '',
  components: {
    Search,
    Item,
    Recommend,
    Star,
    Person
  },
  props: {},
  data() {
    return {
      articles: [],// 更新文章的列表
      userList: {
        birth: "",
        createTime: "",
        email: "",
        hobby: "",
        id: "",
        institute: "",
        name: "",
        password: "",
        phoneNumber: "",
        sex: "",
        specialty: "",
        totalTime: null,
        userPic: "",
      }
    }

  },
  created() {
    this.getItems()
    this.loadUser()
    // console.log(item);
  },
  methods: {
    // 获取所有文章
    async getItems() {
      const params = {
        "page": 1,
        "pageSize": 2
      }
      const { data: res } = await getUpdateItems(params)
      this.articles = res.data.list
      console.log(this.articles);

    },
    //获取当前用户信息
    loadUser() {
      getUserProfile().then(res => {
        this.userList = res.data.data
        // console.log(this.userList)

      });
    }
  }
}
</script>

<style lang="less" scoped>
.all-left{
  width: 38vw; 
  display: inline-block;
}
.all-mid{
  width: 21vw;
  height: 100%;
  display: inline-block;
  background-color: #fff;
  left: 0;
}
.item-container{
  margin-bottom: 4vh;
}
.all-include{
  display:flex;
  // width:60vw;
}
.all-right{
  display: inline-block;
  position: absolute;
  right: 0;
  top: 4vh;
  width: 20vw;
  height: 100vh;
}
</style>
